<template>
  <view class="my-promotion">
    <!-- <view class="header">
      <view class="name acea-row row-center-wrapper">
        <view>当前佣金</view>
        <view class="record" @click="goCashRecord()">
          提现记录
          <text class="iconfont icon-xiangyou"></text>
        </view>
      </view>
      <view class="num">{{ Info.commissionCount }}</view>
      <view class="profit acea-row row-between-wrapper">
        <view class="item">
          <view>昨日收益</view>
          <view class="money">{{ Info.lastDayCount }}</view>
        </view>
        <view class="item">
          <view>累积已提</view>
          <view class="money">{{ Info.extractCount }}</view>
        </view>
      </view>
    </view> -->
    <view class="commission">
      <image
        class="commission-img"
        src="/static/fx/fx_bg.png"
        mode="widthFix"
      />
      <view class="commission-b">
        <view class="bigBox">
          <view>当前佣金</view>
          <view class="bigBox-m">{{ Info.commissionCount }}</view>
        </view>
        <view class="profitBox">
          <view class="item">
            <view>累计收益</view>
            <view class="money">{{ Info.lastDayCount }}</view>
          </view>
          <view class="line"></view>
          <view class="item">
            <view>累积已提</view>
            <view class="money">{{ Info.extractCount }}</view>
          </view>
        </view>
        <view class="btnBox">
          <view class="btn mr24" @click="goCashRecord()">提现记录</view>
          <view class="btn active" @click="toCash()">立即提现</view>
        </view>
      </view>
    </view>
    <view class="promotion">
      <view class="promotion-title-img">
        <image
          src="/static/fx/fx_title.png"
          mode="widthFix"
        />
      </view>
      <!-- <view class="promotion-t">-推广赚现金-</view> -->
      <!-- <view class="promotion-btn" @click="goPoster()">立即推广</view> -->
      <view class="promotion-btn" @click="handleShare">立即推广</view>
      <view class="actionBox">
        <view class="item" @click="goPromoterList()">
          <!-- <text class="item-icon iconfont icon-tongji"></text> -->
          <u--image
              width="80rpx"
              height="80rpx"
              :src="'/static/fx/fx_tj.png'"
            ></u--image>
          <text class="text">推广人数</text>
        </view>
        <view class="item" @click="goCommissionDetails()">
          <!-- <text class="item-icon iconfont icon-qiandai"></text> -->
          <u--image
              width="80rpx"
              height="80rpx"
              :src="'/static/fx/fx_yjmx.png'"
            ></u--image>
          <text class="text">佣金明细</text>
        </view>
        <view class="item" @click="goPromoterOrder()">
          <!-- <text class="item-icon iconfont icon-dingdan"></text> -->
          <u--image
              width="80rpx"
              height="80rpx"
              :src="'/static/fx/fx_order.png'"
            ></u--image>
          <text class="text">推广人订单</text>
        </view>
      </view>
    </view>
    <!-- 分享 -->
    <Share
      :shareObj="shareObj"
      ref="share"
      :contentHeight="580"
      @sharePoster="sharePoster"
    ></Share>
    <!-- 分享海报 -->
    <PosterPop
      ref="PosterPop"
      v-model="showPoster"
      @close="e => (showPoster = e)"
    ></PosterPop>
    <!-- <view class="list acea-row row-between-wrapper">
      <view
        class="item acea-row row-center-wrapper row-column"
        @click="goPoster()"
      >
        <text class="iconfont icon-erweima"></text>
        <view>推广名片</view>
      </view>
      <view
        class="item acea-row row-center-wrapper row-column"
        @click="goPromoterList()"
      >
        <text class="iconfont icon-tongji"></text>
        <view>推广人统计</view>
      </view>
      <view
        class="item acea-row row-center-wrapper row-column"
        @click="goCommissionDetails()"
      >
        <text class="iconfont icon-qiandai"></text>
        <view>佣金明细</view>
      </view>
      <view
        class="item acea-row row-center-wrapper row-column"
        @click="goPromoterOrder()"
      >
        <text class="iconfont icon-dingdan"></text>
        <view>推广人订单</view>
      </view>
      <view
        class="item acea-row row-center-wrapper row-column"
        @click="toCash()"
      >
        <text class="iconfont icon-chongzhi"></text>
        <view>立即提现</view>
      </view>
    </view> -->
  </view>
</template>
<script>
import { mapGetters } from 'vuex'
import Share from '../components/share'
import PosterPop from '../components/posterPop'
import { getSpreadInfo } from '@/api/user'

export default {
  name: 'UserPromotion',
  components: { Share, PosterPop },
  data: function () {
    return {
      Info: {
        lastDayCount: 0,
        extractCount: 0,
        commissionCount: 0,
      },
      showPoster: false,
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  mounted: function () {
    this.getInfo()
  },
  methods: {
    // 分销海报弹窗
    sharePoster() {
      this.showPoster = true
    },
    handleShare() {
      this.shareObj = {
        href: `/pages/circle/topicHome`, //地址
        title: '炎华潮玩',
        imageUrl: '',
        // summary: '擅长领域:' + this.circleListOne.goodAt,
        // imageUrl: this.circleListOne.avatar
      }
      this.$refs.share.shareShow = true
    },
    goPoster() {
      this.$yrouter.push('/pages/user/promotion/Poster/index')
    },
    goCashRecord() {
      this.$yrouter.push('/pages/user/promotion/CashRecord/index')
    },
    goPromoterList() {
      this.$yrouter.push('/pages/user/promotion/PromoterList/index')
    },
    goCommissionDetails() {
      this.$yrouter.push('/pages/user/promotion/CommissionDetails/index')
    },
    goPromoterOrder() {
      this.$yrouter.push('/pages/user/promotion/PromoterOrder/index')
    },
    getInfo: function () {
      let that = this
      getSpreadInfo().then(
        res => {
          that.Info = res.data
        },
        function (err) {
          uni.showToast({
            title:
              err.msg || err.response.data.msg || err.response.data.message,
            icon: 'none',
            duration: 2000,
          })
        }
      )
    },
    toCash: function () {
      this.$yrouter.push({ path: '/pages/user/promotion/UserCash/index' })
     //this.$yrouter.push({ path: '/pages/user/promotion/CashAudit/index' })//测试提现成功页面

    },
  },
  onShareAppMessage(obj) {
    let shareObj = {
      title: '宠物优品 优惠多多，邀请好友下单还有奖励哦',
      // desc: '【分享即赚】小程序下单，佣金轻松到手，开启你的躺赚之旅！',
      imageUrl: 'https://res.jiyaqi.com/mall/icon/share_weixin.png',
      path: `/pages/index/index?spread=${this.userInfo.uid}`,
    }
    return shareObj
  },
  onShareTimeline(obj) {
    let shareObj = {
      title: '宠物优品 优惠多多，邀请好友下单还有奖励哦',
      // desc: '【分享即赚】小程序下单，佣金轻松到手，开启你的躺赚之旅！',
      imageUrl: 'https://res.jiyaqi.com/mall/icon/share_weixin.png',
      path: `/pages/index/index?spread=${this.userInfo.uid}`,
    }
    return shareObj
  },
}
</script>

<style lang="less">
.commission {
  // padding-top: 300rpx;
  font-size: 24rpx;
  // background: url(https://res.jiyaqi.com/mall/icon/bg02.png) top center
  //   no-repeat;
  // background-size: 100% auto;
  // .commission-img {
  //   z-index: -1;
  //   position: absolute;
  //   width: 100vw;
  //   ::after {
  //     content: '';
  //   }
  // }
  .commission-img{
    width: 100%;
  }
  .commission-b {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 32rpx 32rpx 0rpx 0rpx;
    margin-top: -32rpx;
    padding: 56rpx 48rpx 32rpx;
    background: #ffffff;
    text-align: center;
  }
  .btnBox {
    margin-top: 56rpx;
    display: flex;
    .btn {
      width: 50%;
      border-radius: 40rpx;
      border: 1px solid #dee0e3;
      height: 80rpx;
      line-height: 80rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: #1f2329;
      text-align: center;
      font-style: normal;
      &.active {
        background: #fff;
        color: #FF5900;
        border-color: #FF5900;
      }
      &.mr24 {
        margin-right: 24rpx;
      }
    }
  }
  .profitBox {
    display: flex;
    justify-content: center;
    align-items: center;
    .item {
      width: 50%;
      .money {
        margin-top: 20rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 40rpx;
        color: #f54a45;
        line-height: 40rpx;
        text-align: center;
        font-style: normal;
      }
    }
    .line {
      width: 2rpx;
      height: 64rpx;
      background: rgba(31, 35, 41, 0.08);
    }
  }
  .bigBox {
    .bigBox-m {
      margin-top: 20rpx;
      margin-bottom: 64rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 56rpx;
      color: #f54a45;
      line-height: 56rpx;
      text-align: center;
      font-style: normal;
    }
  }
}

.promotion {
  position: relative;
  margin: 24rpx;
  padding: 80rpx 22rpx 48rpx;
  background: #ffffff;
  border-radius: 24rpx;
  font-weight: 400;
  font-size: 24rpx;
  color: #1a1a1a;
  line-height: 24rpx;
  text-align: center;
  .promotion-title-img{
    width: 240rpx;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    image{
      width: 100%;
    }
  }
  .promotion-btn {
    margin: 32rpx 0rpx 80rpx;
    height: 88rpx;
    line-height: 88rpx;
    background: linear-gradient( 90deg, #FF9200 0%, #FF5900 100%);
    border-radius: 44rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 32rpx;
    color: #ffffff;
    text-align: center;
    font-style: normal;
  }
  .actionBox {
    display: flex;
    justify-content: center;
    align-items: center;
    .item {
      width: 33.3%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .text{
        margin-top: 20rpx;
      }
      .item-icon {
        margin-bottom: 32rpx;
        display: inline-block;
        width: 56rpx;
        height: 56rpx;
        line-height: 56rpx;
        color: #fff;
        background: #fe6112;
        border-radius: 12rpx;
      }
    }
  }
}
</style>
